<template>
  <div class="lt-container pd-15">
    <div class="pd-15 bg-white radius-6">
      <el-form inline>
        <el-form-item label="歌手名: ">
          <el-input v-model="singerName" placeholder="请输入歌手名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-loading="loading">
        <el-table class="lt-table" :data="tableData">
          <lt-table-column-edit prop="id" label="id" editDisable />
          <lt-table-column-edit prop="singerName" label="歌手名称" />
          <lt-table-column-operation
            v-model="tableData"
            width="180"
            :row-data="rowData"
            primary-key="id"
            focusColumn="singerName"
            deleteApi="deleteSinger"
            saveApi="addSinger"
            editApi="updateSinger"
            validateProp="singerName"
            @delete-confirm="refresh"
          />
        </el-table>
        <div class="pd-t15 d-flex j-center">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            @current-change="getTableData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // 组件引入,直接使用
  import { reactive, ref } from 'vue'
  import { getSingerPage } from '@/api/columnEditApi/columnEditApi'

  import userLoading from '@/hooks/useLoading'
  const { loading, openLoad, closeLoad } = userLoading()

  const singerName = ref<string>('')
  const pageNum = ref<number>(1)
  const pageSize = ref<number>(10)
  const total = ref<number>(0)
  const tableData: any = ref([])
  const rowData = reactive({
    id: '',
    singerName: ''
  })

  const getTableData = () => {
    openLoad()
    getSingerPage({
      singerName: singerName.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }).then(res => {
      const result: any = res
      tableData.value = result.data
      total.value = result.total
      closeLoad()
    })
  }

  const refresh = () => {
    pageNum.value = 1
    pageSize.value = 10
    getTableData()
  }

  getTableData()
</script>

<style lang="scss" scoped>
  .el-form--inline .el-form-item {
    margin-right: 15px;
  }
</style>
